![I tried Animating Mesh Gradients in Figma](https://devio2023-media.developers.io/wp-content/uploads/2021/10/figma_eyecatch.png)
I tried Animating Mesh Gradients in Figma
Introduction
This is Pooja from the Alliance Department, this blog summaries my attempt at animating mesh gradient using Figma.
What's Mesh Gradient
![](https://meshgradient.com/gallery/2.png)
Demo
Following are the steps to create an animating mesh gradient:
- Open Figma, create a new file.
- Create a new Frame.
- Add ellipses to the above created frame.
- Select the ellipses and add a background color to them.
- Select the ellipses and accordingly change the hue of these ellipses using the dropper icon in the Fill option, located in the Properties tab.
- Add the "Layer Blur" effect to the Frame.
- Duplicate the Frame with the ellipses that have different hues.
- With the original Frame and Duplicate Frame, under the Prototype tab add the necessary animation options shown in the below figures and create a Flow Point on the original Frame.
- Move around the ellipses to create the animated effect.
- When you're satisfied with the color hit the play button and witness the animation that come to life.
- Hit the link("Animated Mesh Gradient") below the image to view the Screen Recording
Conclusion
Mesh gradients offer a versatile tool for creating visually stunning elements that capture attention and engage users. Whether you're designing interfaces, illustrations, or animations, mesh gradients can add an eye-catching touch to your work.
Thank you for joining me on this journey of exploring animating mesh gradients in Figma. I hope this article has provided inspiration and empowered you to create captivating designs.
Thank you from your time and Happy Learning!!!